<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="list1" lineWidth="15" :scrollable="false" :activeStyle="{
		        color: '#3478f5',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }" @change="tabclick"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<template v-if="tabsId==1">
				<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id">
					<view class="titletext bold hei_text pdl">{{item.lesson_name}}</view>
					<view class="flexbetween margin_top">
						<view class="">
							<view class="flexleft">
								<view class="lanyuan"></view>
								<view class="xiaohui margin_left">开始 {{item.starttime_text}}</view>
							</view>
							<view class="flexleft margin_top1">
								<view class="hongyuan"></view>
								<view class="xiaohong margin_left">结束
									剩余{{returnFen(item.endtime*1000 - item.starttime*1000,item.duration*60*1000)}}</view>
							</view>
						</view>
						<view class="listbtnlan" v-if="returnShowbtn(item.endtime*1000 - item.starttime*1000)" @click="jixuks(item)">继续考试</view>
					</view>
				</view>
			</template>
			<template v-if="tabsId==2">
				<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="chakansj(item)">
					<view class="titletext bold hei_text pdl">{{item.lesson_name}}</view>
					<view class="margin_top pdl">
						<view class="flexleft">
							<view class="lanyuan"></view>
							<view class="xiaohui margin_left">开始 {{item.starttime_text}}</view>
						</view>
						<view class="flexleft margin_top1">
							<view class="hongyuan"></view>
							<view class="xiaohui margin_left">结束 {{item.endtime_text}}</view>
						</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="flexleft">
							<image
								src="https://xunbo.yuntaiqikeji.com/uploads/20230725/5f1a390c01eae149ad8ef40aa05efffa.jpg"
								mode="" class="listheadplimg2"></image>
							<view class="hei_text margin_left2 bold main_size">老李</view>
						</view>
						<view class="huang_text bold titletext" v-if="item.state==2">改卷中</view>
						<view class="flexright" style="align-items: flex-end;" v-else>
							<view class="bold lan_text" style="font-size: 50rpx;height: 60rpx;">{{item.result_score}}</view>
							<view class="lan_text bold titletext">分</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="tabsId==3">
				<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="chakansj(item)">
					<view class="titletext bold hei_text pdl">{{item.lesson_name}}</view>
					<view class="flexbetween margin_top">
						<view>
							<view class="flexleft">
								<view class="lanyuan"></view>
								<view class="xiaohui margin_left">开始 {{item.starttime_text}}</view>
							</view>
							<view class="flexleft margin_top1">
								<view class="hongyuan"></view>
								<view class="xiaohui margin_left">结束 {{item.endtime_text}}</view>
							</view>
						</view>
						<view class="huang_text bold titletext" v-if="item.state==2">改卷中</view>
						<view class="flexright" style="align-items: flex-end;" v-else>
							<view class="bold lan_text" style="font-size: 50rpx;height: 60rpx;">{{item.result_score}}</view>
							<view class="lan_text bold titletext">分</view>
						</view>
					</view>
				</view>
			</template>
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
						name: "答题中",
						id: 1,
					}, {
						name: "已提交",
						id: 2,
					},
					{
						name: "未提交",
						id: 3,
					}
				],
				tabsId: "1",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			chakansj(item){
				uni.navigateTo({
					url:"/pages_mine/ceshitjh?education_lesson_id=" + item.education_lesson_id+"&student_examination_id="+item.id
				})
			},
			jixuks(item){
				let data = {
					education_lesson_id:item.education_lesson_id,
					student_examination_id:item.id,
					duration:this.returnduration(item.endtime*1000 - item.starttime*1000,item.duration*60*1000)
				}
				console.log(data,"jinglei");
				// return false
				
				uni.navigateTo({
					url:"/pages_index/ceshi?data=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			returnduration(val1, val2) {
				let fen = (Number(val2) - Number(val1)) / 1000 / 60
				return fen
			},
			returnShowbtn(val1) {
				if(val1>0){
					return true
				}else{
					return false
				}
			},
			returnFen(val1, val2) {
				let fen = (Number(val2) - Number(val1)) / 1000
				return this.MillisecondToDate(fen)
			},
			MillisecondToDate(mss) {
				let d = parseInt(mss / 60 / 60 / 24)
				let h = parseInt(mss / 60 / 60 % 24)
				let m = parseInt(mss / 60 % 60)
				let s = parseInt(mss % 60)
				let tian = d?d+"天":""
				let shi = h?h+"小时":""
				let fen = m?m+"分":""
				return tian + shi + fen +s+"秒";
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/examination/getlist', 'GET', {
					page: page || 1,
					state: this.tabsId == 3 ? 2 : this.tabsId,
					is_choose_teacher: this.tabsId == 3 ? 0 : this.tabsId == 1 ? 0 : 1,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			tabclick(item) {
				// console.log(item,999);
				this.tabsId = item.id
				this.init()
			},

		}
	}
</script>

<style scoped>
	.listheadplimg2 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		min-width: 60rpx;
	}

	.lanyuan {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #3478f5;
	}

	.hongyuan {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #ff0000;
	}
</style>